<template>
    <section>
        <div class="cus-container">
            <div class="header">
                <h4>所有客户</h4>
            </div>

            <div class="cus-con">
                <div class="cus-con__title flex-box">
                    <el-input v-model="usersName" placeholder="手机号/微信昵称" style="width:260px;"></el-input>
                    <el-select v-model="usersSource" placeholder="客户来源">
                        <el-option v-for="option in options" :key="option.value"
                                   :label="option.text" :value="option.value">
                            {{ option.text }}
                        </el-option>
                    </el-select>

                    <el-button type="primary" @click="searchItem" icon="el-icon-search"></el-button>
                </div>
                <el-table ref="multipleTable" :data="usersList" v-loading="tableLoading" style="width: 100%"
                          class="table-box">
                    <el-table-column :resizable="false" label="姓名" prop="name">
                    </el-table-column>
                    <el-table-column :resizable="false" label="客户来源" prop="source">
                    </el-table-column>
                    <el-table-column :resizable="false" label="手机号" prop="phone">
                    </el-table-column>
                    <el-table-column :resizable="false" label="微信号/微信昵称" prop="nickname">
                    </el-table-column>
                    <el-table-column :resizable="false" label="积分" prop="integral">
                    </el-table-column>
                    <el-table-column :resizable="false" label="购次" prop="number" sortable>
                    </el-table-column>
                    <el-table-column :resizable="false" prop="operation" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="showItem(scope.$index, scope.row)" type="text"
                                       size="small">查看详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" v-if="page.total">
                    <div>
                        共{{page.count}}页，每页{{pageSize}}条
                    </div>
                    <el-pagination layout="prev, pager, next" :total="page.total" prev-text="上一页" next-text="下一页"
                                   :page-size="pageSize"
                                   @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>

        </div>
    </section>
</template>

<script>

    export default {
        components: {},
        data() {
            return {
                tableLoading: true,
                usersList: [],

                usersSource: '',
                options: [
                    {text: '扫描二维码', value: '1'},
                    {text: '好友邀请', value: '0'}
                ],
                usersName: '',

                page: {
                    total: null,
                    count: null
                },
                pageSize: 20
            }
        },
        watch: {},
        computed: {},
        mounted() {
            this.getUsersList();
        },
        methods: {
            genItem(data) {
                axios
                    .get('admin_users', {
                        params: data
                    })
                    .then(res => {
                        this.page.total = res.data.count;
                        this.page.count = Math.ceil(res.data.count / this.pageSize)
                        return res;
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('数据', res)
                        this.usersList = res;
                        this.tableLoading = false;
                    })
            },
            searchItem() {
                const data = {
                    pagination:1,
                    pageSize: this.pageSize,
                    usersName: ['like', `%${this.usersName}%`],
                }
                this.genItem(data)
            },
            getUsersList() {
                const data = {
                    pagination:1,
                    pageSize: this.pageSize
                }
                this.genItem(data)
            },
            handleCurrentChange(current) {
                this.getGoodList(current);
            },
            showItem(index, row) {
                this.$router.push({name: 'CustomerDetails', query: {row: row}});
            }
        }
    }
</script>
<style scoped>
    .cus-container {
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .header {
        padding: 10px;

        background: #FFFFFF;
    }

    .cus-con {
        margin: 10px;
        padding: 20px;

        background: #FFFFFF;
    }

    .cus-con__title {
        padding: 2px 0 20px 0;

        border-bottom: 1px dashed #D8D8D8;
    }

    .table-box {
        min-height: calc(100vh - 92px);
    }

    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
    }
</style>